<template>
  <div class="cards">
    <div class="card-top">
      <span>Cards</span>
      <span>view all crads</span>
    </div>
    <div class="card-main">
      <ul class="cards-item">
        <li v-for="item in listCards" :key="item.cardNum">
            <em>Avaiable balance</em>
            <em>${{item.momey}}</em>
            <em>****&nbsp;&nbsp;****&nbsp;&nbsp;****&nbsp;&nbsp;**{{item.cardNum}}</em>
            <em>Monzo</em>
            <span></span>
            <span></span>
        </li>
        <li>
            <div class="el-icon-circle-plus-outline"></div>
            <div>Add New Crad</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from 'vuex'

// import{ mapActions } from 'vuex'
import store from '../store/index'
export default {
  data () {
    return {
    }
  },
  methods: {
    // 映射为自己方法
    ...mapMutations(['change'])
    // ...mapActions(['getList'])
  },
  store,
  computed: {
    // 映射为计算属性
    ...mapState(['listCards'])
  },
  created () {
    // 调用获取数据库数据
    // this.getList()
    this.change()
  }
}
</script>

<style lang="scss" scope>
.cards {
  margin: 0 40px 40px;
    //card上面文字样式
  .card-top {
    // 清除浮动
    overflow: hidden;
    margin-bottom: 20px;
    span:nth-of-type(1) {
      float: left;
      font-weight: 700;
      font-size: 20px;
    }
    span:nth-of-type(2) {
      float: right;
      color: #cccccc;
    }
  }
  // card样式
  ul {
    height: 200px;
    // 样式初始化
    padding: 0;
    margin: 0;
    // 三个卡片伸缩布局
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      height: 100%;
      flex: 1;
      list-style: none;
      margin-right: 10px;
      border-radius: 20px;
      position: relative;
      em{
          position: absolute;
          left: 20px;
      }
      em:nth-of-type(1){
          font-size: 12px;
          font-style: normal;
          top: 10px;
      }
      em:nth-of-type(2),em:nth-of-type(4){
          font-size: 16px;
          color: #fff;
          font-weight: 700;
          top: 30px;
      }
      em:nth-of-type(3){
          font-size: 16px;
          font-style: normal;
          top: 100px;
      }
      em:nth-of-type(4){
          top: 166px;
      }
    // card内的黄红圆形
    span{
        // 模式转换
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        bottom: 20px;
    }
    span:nth-of-type(1){
        background-color: red;
        position: absolute;
        right: 10px;
    }
    span:nth-of-type(2){
        background-color: yellow;
        position: absolute;
        right: 28px;
    }
    }
    // 三个可视化card样式
    li:first-of-type {
      background-color: #ff4d56;
    }
    li:nth-last-of-type(1) {
      background-color: #F8F8F8;
      margin-right: 0px;
    //   伸缩布局居中
      display: flex;
    //   变换主轴
      flex-direction: column;
    //   水平居中
      justify-content: center;
    //   垂直居中
      align-items: center;
      .el-icon-circle-plus-outline{
          font-size: 50px;
          color:rgba($color: #ccc, $alpha: 0.8);
      }
    }
    li:nth-last-of-type(2) {
      background-color: #0e809a;
    }
  }
}
</style>
